<template>
  <div class="com-middle-view">
    <div class="view-top">
      <img class="img-view0" src="../../assets/img/ytfx/bg3.png"/>
      <div class="img-view">
        <img v-if="dataVal.rate > 0" src="../../assets/img/ytfx/r1.svg" class="img-r"/>
        <img v-else  src="../../assets/img/ytfx/g1.svg" class="img-r"  style="transform: rotateX(180deg);"/>
        <span class="text" :class="dataVal.rate > 0 ? 'text-red' : 'text-green'">
          {{ dataVal.rate > 0 ? dataVal.rate : -dataVal.rate }}%
        </span>
        <p class="">本期较去年同期销售额</p>
      </div>
      <!-- <div class="view-top-item-all">
        <div class="view-top-item-text">本期较去年同期销售额</div>
        <div class="view-top-item-num big-num">
          {{ dataVal.rate > 0 ? "上涨" : "下滑"
          }}{{ dataVal.rate > 0 ? dataVal.rate : -dataVal.rate }}%
        </div>
      </div> -->
      <div class="view-top-item">
        <div class="view-top-item-text">主要收入来源</div>
        <div class="view-top-item-num">{{ dataVal.name }}</div>
      </div>
      <div class="view-top-item">
        <div class="view-top-item-text">产品总金额</div>
        <div class="view-top-item-num">{{ dataVal.money }}</div>
      </div>
      <div class="view-top-item">
        <div class="view-top-item-text">总销售额占比</div>
        <div class="view-top-item-num">{{ dataVal.moneyRate }}%</div>
      </div>
    </div>
    <div class="view-btm">
      <div class="middle-body">
        <div class="middle-body-title">本期销售总额</div>
        <div class="middle-body-left">
          <!-- <div v-for="(item,index) in setMoney(dataVal.nowMoney)" :key="index" class="middle-body-view">
          <div class="item-view">{{item}}</div>
        </div> -->
          <span class="text">¥ {{ dataVal.nowMoney }}</span>
        </div>
      </div>
      <div class="middle-body">
        <div class="middle-body-title" style="text-align: right">历史同期销售总额</div>
        <div class="middle-body-left">
          <!-- <div v-for="(item,index) in setMoney(dataVal.lastMoney)" :key="index" class="middle-body-view">
          <div class="item-view">{{item}}</div>
        </div>
        <div class="text-yuan">元</div> -->
          <span class="text" style="text-align: right;width: 100%;"> ¥ {{ dataVal.lastMoney }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  mixins: [],
  components: {},
  props: ["dataVal"],
  data() {
    return {
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    // 数据处理有问题 需要修改（统一解决）
    setMoney(val) {
      return val ? Array.from(`${val}`) : ["0"];
    },
  },
};
</script>
<style lang="scss" scoped>
.com-middle-view {
  height: 100%;
  width: 100%;
  position: relative;
  text-align: center;

  //background-image: url("../../assets/img/ytfx/wt.png");
  //background-image: url("../../assets/img/ytfx/bg5.png");
  background-position: center; /* 背景图片居中 */
  background-repeat: no-repeat; /* 不重复背景图片 */
  // background-size: cover;
  background-size: 100% 100%;
  .img-view0{
    position: absolute;
    top: -30px;
    height: calc((((100vh - 215px) / 2)));
    z-index:6;
  }
  .img-view{
    width: 130px;
    height: 130px;
    position: absolute;
    top: 90px;
    z-index:12;
    left: 300px;
    //opacity:0.8;
    //background-image: url("../../assets/img/ytfx/bg3.png");
    background-position: center; /* 背景图片居中 */
    background-repeat: no-repeat; /* 不重复背景图片 */
    display: flex;
    justify-content: center;
    align-items: center;
    img{
      //width: 42px;
      //height: 52px;
      height:35px;
    }
    .img-r{
      padding-right: 10px;
    }
    .text{
      font-size: 36px;
      font-weight: bold;
      font-style:oblique;
    }
    .text-red{
      //color:#FF4242;
      color: rgb(255, 88, 88) ;
      //text-shadow:1px 0px #C11A1A , 1px 2px #C93939 , 3px 1px #C11A1A ,
		  //          2px 3px #C93939, 4px 2px  #C11A1A , 4px 4px #C93939
      //text-shadow:1px 0px rgb(100, 0, 0) , 1px 2px RGB(255, 0, 0) , 3px 1px rgb(100, 0, 0) ,
		  //          2px 3px RGB(255, 0, 0), 4px 2px  rgb(100, 0, 0) , 4px 4px RGB(255, 0, 0)
      text-shadow:1px 0px RGB(255, 0, 0) , 1px 2px rgb(100, 0, 0)  , 3px 1px RGB(255, 0, 0) ,
		            2px 3px rgb(100, 0, 0) , 4px 2px  RGB(255, 0, 0) , 4px 4px rgb(100, 0, 0) 
    }
    .text-green{
      color: #6CD06A;
      text-shadow:1px 0px #009916, 1px 2px #006615, 3px 1px #009916,
		            2px 3px #006615, 4px 2px #009916, 4px 4px #006615
    }
    @keyframes grow {
            0% {
              transform: scale(1); /* 原始大小 */
            }
            50% {
              transform: scale(1.2); /* 放大到原来的1.5倍 */
            }
            100% {
              transform: scale(1); /* 恢复到原始大小 */
            }
          }
    .text-up{
      //color: #00f0ff;
    }
    p{
      position: absolute;
      bottom: 0;
      width: 243px;
      height: 44px;
      font-size: 20px;
      //background: linear-gradient(270deg,rgba(12,36,105,0.00), #153490 15%, #153490 88%, rgba(12,36,105,0.00) 97%);
    }
  }
  .view-top {
    position: absolute;
    z-index: 11;
    margin: 30px 10px;
    background-image: url("../../assets/img/ytfx/view-top-bg.png");
    background-position: center; /* 背景图片居中 */
    background-repeat: no-repeat; /* 不重复背景图片 */
    background-size: 100% 100%;
    width: calc(100% - 20px);
    height: 80px;
    // border: 1px solid red;
    display: flex;
    justify-content: center;
    align-items: center;
    .view-top-img {
      width: 50px;
      height: 50px;
    }
    .view-top-item {
      width:calc(30% - 40px);
      height: 40px;
      margin: 0 10px;
      padding: 5px 10px;
      background-image: url("../../assets/img/ytfx/btm_kuang.png");
      background-position: center; /* 背景图片居中 */
      background-repeat: no-repeat; /* 不重复背景图片 */
      background-size: 100% 100%;
      .view-top-item-text {
        font-size: 18px;
        max-width: 130px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 16px;
      }
      .view-top-item-num {
        font-size: 14px;
        color: #05f5fe;
        max-width: 130px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .big-num {
        font-size: 18px;
        font-weight: bold;
      }
    }
    .view-top-item-all {
      .big-num {
        font-size: 22px;
        font-weight: bold;
      }
      .view-top-item-text {
        font-size: 18px;
      }
      .view-top-item-num {
        font-size: 18px;
        color: #05f5fe;
      }
    }
  }
  .view-btm {
    position: absolute;
    z-index: 11;
    bottom: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    // padding: 20px;
    .middle-body {
      //margin: 120px 50px;
      padding: 10px 20px;
      text-align: center;
      width: 40%;
      background-image: url("../../assets/img/ytfx/view-btm_kuang.png");
      background-position: center; /* 背景图片居中 */
      background-repeat: no-repeat; /* 不重复背景图片 */
      background-size: 100% 100%;
      .middle-body-title {
        font-size: 20px;
        /*color: #0e5cc6;
        background: linear-gradient(180deg, #fff, #0e5cc6);
        -webkit-background-clip: text;
        color: transparent;
        font-weight: bold;*/
        text-align: left;
      }
      .middle-body-left {
        display: flex;
        margin: 0 10px;
        margin-top: 15px;
        .text {
          font-size: 25px;
          padding-left: 10px;
          color: #00D7FF;
          background: linear-gradient(180deg, #c4f4ff 26%, #00D7FF 72%);
          -webkit-background-clip: text;
          color: transparent;
          font-weight: bold;
        }
        .text-yuan {
          display: table-cell;
          vertical-align: sub;
          font-size: 20px;
        }
        /*.middle-body-view {
          .item-view {
            // display: inline;
            width: 30px;
            height: 50px;
            line-height: 50px;
            background: #000;
            opacity: 0.6;
            margin: 10px 5px;
            text-align: center;
            color: #05f5fe;
            font-size: 26px;
            font-weight: bold;
          }
        }*/
      }
    }
  }
}
</style>
